<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="static/layui/css/layui.css">
    <title>学生成绩管理系统</title>
    <style>
        body {
            /*background-color: #009688;*/
            background: url(/static/img/login.jpg);
            background-size: cover;
        }

        .formitem {
            width: 480px;
            height: 350px;
            position: absolute;
            transform: translate(-50%, -61.8%);
            /*左右方向的位置为50%, 上下方向的位置为黄金分割比例0.618*/
            left: 50%;
            top: 50%;
            border-radius: 8px;
            /*登录框4个角设置为圆角*/
            background: rgba(255, 255, 255, 0.9);
            /*白色背景,不透明度90%*/
            text-align: center;
        }

        .layui-input-block {
            margin-top: 15px;
            margin-left: 100px;
            width: 260px;
        }

        .blank2 {
            margin-left: 60px;
        }
    </style>
</head>
<body>
<div class="formitem">
    <br><br>
    <div><h1>学生成绩管理系统</h1></div>
    <form class="layui-form" action="login" method="post">
        <div class="layui-input-block">
            <table style="margin-top:30px">
                <tr>
                    <td width="100"><span style="float:left;">用户名:</span></td>
                    <td width="400"><input type="text" name="username" lay-verify="required" lay-reqtext="用户名不能为空"
                               placeholder="请输入用户名" class="layui-input" >
                    </td>
                </tr>
            </table>
        </div>
        <div class="layui-input-block">
            <table style="margin-top:30px">
                <tr>
                    <td width="100"><span style="float:left;">密码:</span></td>
                    <td width="400"><input type="password" name="password" lay-verify="required|password" lay-reqtext="密码不能为空"
                                           placeholder="请输入密码" class="layui-input">
                    </td>
                </tr>
            </table>
        </div>

        <div class="layui-input-block">
            <input type="radio" name="people" value="student" title="学生" checked="">
            <input type="radio" name="people" value="teacher" title="老师">
            <input type="radio" name="people" value="manage" title="管理员">
        </div>
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" layer-filter="formDemo" lay-submit="">登录</button>
            <span class="blank2"></span>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
</form>
</div>
<script type="text/javascript" src="static/layui/layui.js"></script>
<script type="text/javascript">
    //Demo
    layui.use(['form'], function () {
        var form = layui.form;
        var layer=layui.layer;

        //监听提交
        form.on('submit(formDemo)', function (data) {
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });
</script>
</body>
</html>